<template>
  <div class="table-search">
    <a-form-model
      layout="inline"
      :model="formData"
      ref="form"
      class="search-box"
    >
      <a-form-model-item
        v-for="(item, index) in columns"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <a-input
          v-if="item.type == 'text'"
          v-model="formData[item.prop]"
          :placeholder="`请输入${item.label}`"
          allow-clear
          style="width: 180px"
        />

        <!-- <p v-else-if="item.type === 'select'" v-for="(ite, indx) in item.enums" :key="indx">{{ite.label}}</p> -->
        <a-select
          v-else-if="item.type === 'select'"
          v-model="formData[item.prop]"
          show-search
          allow-clear
          v-bind="item.attrs"
          placeholder="请选择"
          style="width: 180px"
        >
          <a-select-option
            v-for="(opt, idx) in item.enums"
            :key="idx"
            :value="opt.value"
          >
            {{ opt.label }}
          </a-select-option>
        </a-select>

        <a-range-picker
          v-else-if="item.type === 'daterange'"
          @change="handleonChange"
          style="width: 280px"
          :ranges="{
            Today: [moment(), moment()],
            'This Month': [moment(), moment().endOf('month')],
          }"
        >
        </a-range-picker>
      </a-form-model-item>
      <a-form-model-item>
        <a-button icon="search" type="primary" @click="handleSubmit('form')">
          查询
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="search-button">
      <slot name="button"></slot>
    </div>
    <div class="search-hr"></div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  model: {
    prop: "formData",
    event: "input",
  },
  props: {
    columns: {
      required: true,
      type: Array,
    },
  },
  data() {
    return {
      formData: {},
      enums: [
        {
          value: "上海",
          label: "上海",
        },
      ],
    };
  },
  methods: {
    moment,
    cloneDeep(obj) {
      return JSON.parse(JSON.stringify(obj));
    },
    handleonChange(date, dateString) {
      let column = this.columns.filter((item) => item.type == "daterange")[0];
      // console.log(date,dateString,column)
      this.formData[column.prop] = dateString;
      const formData = this.cloneDeep(this.formData);
      this.$emit("input", formData);
    },
    handleSubmit(formName) {
      // console.log(this.$refs);
      this.$refs[formName].validate((valid) => {
        console.log(valid, "valid");
        if (valid) {
          //   alert('submit!');
          this.$emit("search", this.formData);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.table-search {
  display: flex;
  position: relative;
  justify-content: space-between;
  .search-box {
    padding-bottom: 16px;
  }
  .search-button {
    line-height: 40px;
    white-space: nowrap;
  }
  .search-hr {
    position: absolute;
    width: 2000px;
    height: 2px;
    background: #eff4fb;
    bottom: 0;
    left: -100px;
  }
}
</style>
